<template>
  <view
    class="k-footer"
    :style="{ bottom: bottom }"
    :class="{ 'safe-area-inset-bottom': !bottom }"
  >
    <view class="k-footer-content df-cc" :class="props.customClass">
      <uv-button
        @click="tapBtn"
        :color="props.disabled ? '#BFBFBF' : $CONFIG.SUN_BASE_COLOR"
        :custom-style="customStyle"
        :loading="props.loading"
        :plain="props.plain"
      >
        <slot></slot>
      </uv-button>
    </view>
  </view>
  <view v-if="props.placeholder" :class="{ 'safe-area-inset-bottom': !bottom }">
    <view class="k-footer-content"> </view>
  </view>
</template>

<script setup>
const props = defineProps({
  placeholder: {
    type: Boolean,
    default: true,
  },
  plain: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  btnWidth: {
    type: String,
    default: "690rpx",
  },
  url: {
    type: String,
    default: "",
  },
  jumpType: {
    type: String,
    default: "navigateTo",
  },
  bottom: {
    type: String,
    default: "",
  },
  customClass: {
    type: String,
    default: "",
  },
});
const customStyle = {
  width: props.btnWidth,
  height: '88rpx',
  borderRadius: '20rpx',
};
const emits = defineEmits(['click']);
const tapBtn = () => {
  if (props.disabled) return;
  if (props.url) {
    switch (props.jumpType) {
      case "navigateTo":
        uni.navigateTo({
          url: props.url,
        });
        break;
      case "redirectTo":
        uni.redirectTo({
          url: props.url,
        });
        break;
      case "switchTab":
        uni.switchTab({
          url: props.url,
        });
        break;
      case "reLaunch":
        uni.reLaunch({
          url: props.url,
        });
        break;
      default:
        uni.navigateTo({
          url: props.url,
        });
    }
  } else {
    emits('click');
  }
};
</script>

<style scoped lang="scss">
.k-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
.k-footer-content {
  height: 160rpx;
}
</style>
